<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/app.js"></script>
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
						color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
						height: '50px', //可选,默认50px.下拉刷新控件的高度,
						range: '100px', //可选 默认100px,控件可下拉拖拽的范围
						offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
						auto: true, //可选,默认false.首次加载自动上拉刷新一次
						callback: csh() //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
				}
			});

			function add0(m) {
				return m < 10 ? '0' + m : m
			}

			function formatTime(shijianchuo) {
				//shijianchuo是整数，否则要parseInt转换
				var time = new Date(shijianchuo);
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				var h = time.getHours();
				var mm = time.getMinutes();
				var s = time.getSeconds();
				return y + '-' + add0(m) + '-' + add0(d);
			}

			/*'yyyy-MM-dd'格式的字符串转日期*/
			function stringToDate(str) {
				var dateStrs = str.split("-");
				var year = parseInt(dateStrs[0], 10);
				var month = parseInt(dateStrs[1], 10) - 1;
				var day = parseInt(dateStrs[2], 10);
				var date = new Date(year, month, day);
				return date;
			}

			var cid;

			function csh() {
				var userId = localStorage.getItem("userId");

				mui.ajax(ip + '/feedback/getAllByLimit?userId=' + userId, {
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: function(data) {
						console.log(data)
						var html = '';
						var nt = document.getElementById("ts");
						for (var i = 0; i < data.rows.length; i++) {
							console.log(data.rows[i].feedback);

							var c = " mui-badge-success";
							if (!data.rows[i].reply || "null" == data.rows[i].reply) {
								data.rows[i].reply = '等待反馈';
								c = '';
							}
							html += ' <li class="mui-table-view-cell">' + data.rows[i].feedback +
								'<span class="mui-badge' + c + '">' + data.rows[i].reply + '</span> ' +
								'</li>';
						}

						nt.innerHTML = html;
						console.log(html)
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						mui.toast("服务器错误！");
						return 0;
					}
				});
			}

			function tj() {
				var userId = localStorage.getItem("userId");
				var msg = document.getElementById("fknr");
				console.log("评论提交")
				mui.ajax(ip + '/feedback/doAdd?userId=' + userId + '&feedback=' + msg.value, {
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；   
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: function(data) {
						console.log(data)
						if (data == "SUCCESS") {
							mui.toast("反馈成功");
							var nt = document.getElementById("ts");
							var html = nt.innerHTML;
							console.log(html)
							html = ' <li class="mui-table-view-cell">' + msg.value.trim() +
								'<span class="mui-badge">等待反馈' + '</span> ' +
								'</li>' + html;
							nt.innerHTML = html;
						}
					},
					error: function(xhr, type, errorThrown) {
						mui.toast("反馈成功");
						var nt = document.getElementById("ts");
						var html = nt.innerHTML;

						html = ' <li class="mui-table-view-cell"> ' + msg.value.trim() +
							'    <span class="mui-badge">等待反馈' + '</span> ' +
							'</li>' + html;
						console.log(html)
						nt.innerHTML = html;
					}
				});
			}
		</script>
	</body>

	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">投诉反馈</h1>
	</header>

	<ul class="mui-table-view">
		<ul class="mui-table-view" id="ts" style="top: 3.125rem;">

		</ul>
	</ul>
	<div style="text-align: center;">
		<textarea rows="3" cols="20" placeholder="反馈内容" id="fknr">
		</textarea>
		<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="tj()">提交反馈</button>
	</div>

</html>
